<template>
  <div class="page">
    <indicator
      :draggable="draggable"
      @rotate="rotate"
      @zoom="zoom"
      @reset="reset"
      @drawStart="drawStart"
      @moveStart="moveStart"
      @addHighlightArea="addHighlightArea"
    />
    <prevImg
      class="prev-img"
      ref="preveImg"
      :draggable="draggable"
      @update:draggable="draggable = $event"
      :imageSrc="imageSrc"
    ></prevImg>
  </div>
</template>
<script>
import indicator from './components/indicator.vue'
import prevImg from './components/prevImg2.vue'
export default {
  name: 'App',
  components: {
    indicator,
    prevImg,
  },
  data() {
    return {
      draggable: true,
      imageSrc:
        'https://oss.xinjiaoyu.com/exam/test/182769/10237/20230413_64aacbb1995a4d91b8a1ef8342518af5_36/20230413_64aacbb1995a4d91b8a1ef8342518af5_36_001_page.jpg',
    }
  },
  methods: {
    rotate(angle) {
      this.$refs.preveImg.rotate(angle)
    },
    zoom(scale) {
      this.$refs.preveImg.zoom(scale)
    },
    reset() {
      this.$refs.preveImg.reset()
    },
    drawStart() {
      this.draggable = false
    },
    moveStart() {
      this.draggable = true
    },
    addHighlightArea(area) {
      this.$refs.preveImg.addHighlightArea(area)
    },
  },
}
</script>
<style lang="scss">
.page {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  .prev-img {
    flex: 1;
  }
}
</style>
